<template>
  <div class="page-content">
    <div class="header">
      <h3>题库列表</h3>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="科目一" name="1">
        <object-one-and-four v-if="activeName === '1'" category-id="1" :car-statc="carStatcOne"
          @refreshStatc="getStatcInfo"></object-one-and-four>
      </el-tab-pane>
      <el-tab-pane label="科目四" name="4">
        <object-one-and-four v-if="activeName === '4'" category-id="4" :car-statc="carStatcFour"
          @refreshStatc="getStatcInfo"></object-one-and-four>
      </el-tab-pane>
      <el-tab-pane label="注销恢复" name="5">
        <object-one-and-four v-if="activeName === '5'" category-id="5" :car-statc="carStatcLogoutRecovery"
          @refreshStatc="getStatcInfo"></object-one-and-four>
      </el-tab-pane>
      <el-tab-pane label="满分学习" name="6">
        <object-one-and-four v-if="activeName === '6'" category-id="6" :car-statc="carStatcStudy"
          @refreshStatc="getStatcInfo"></object-one-and-four>
      </el-tab-pane>
      <el-tab-pane label="三力测试" name="7">
        <object-one-and-four v-if="activeName === '7'" category-id="7" :car-statc="carStatcThreeTest"
          @refreshStatc="getStatcInfo"></object-one-and-four>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import objectOneAndFour from './components/objectOneAndFour.vue'
import { getStatData } from '@/api/questionbank'

const activeName = ref<string>('1')

const handleClick = (e: any) => {
  console.log(e)
}
const allCarStatc = ref({
  categoryId: ''
})
const carStatcOne = ref({})
const carStatcTwo = ref({})
const carStatcThree = ref({})
const carStatcFour = ref({})

const carStatcLogoutRecovery = ref({})
const carStatcStudy = ref({})
const carStatcThreeTest = ref({})

const getStatcInfo = async () => {
  const res = await getStatData({ type: 0 })
  allCarStatc.value = res.data.find((e: any) => e.categoryId === '0')
  carStatcOne.value = res.data.find((e: any) => e.categoryId === '1')
  carStatcTwo.value = res.data.find((e: any) => e.categoryId === '2')
  carStatcThree.value = res.data.find((e: any) => e.categoryId === '3')
  carStatcFour.value = res.data.find((e: any) => e.categoryId === '4')
  carStatcLogoutRecovery.value = res.data.find((e: any) => e.categoryId === '5')
  carStatcStudy.value = res.data.find((e: any) => e.categoryId === '6')
  carStatcThreeTest.value = res.data.find((e: any) => e.categoryId === '7')
}
onMounted(() => {
  getStatcInfo()
})
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
</style>
